import { getApp, modUserApplet } from "@/api/modules/applet/userApplet";
import Navigation from "@/components/Frame/Navigation";
import PageHeader from "@/components/Frame/PageHeader";
import { showTips } from "@/utils/util";
import { useRoute } from "vue-router";
import BasicDetail from "./basicDetail";
import DeployDetail from "./deployDetail";
import BasicDialog from "./detailDialog";
import { ComponentInternalInstance, getCurrentInstance } from "vue";

export default defineComponent({
	name: "AppletDetail",
	setup() {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const route = useRoute();
		const state = reactive<any>({ appId: route.query.id as string, basicDetail: {} });
		onMounted(async () => {
			init();
		});
		const init = async () => {
			let { result } = await getApp({ id: state.appId });
			state.basicDetail = result;
		};
		const navList = reactive([
			{ label: proxy?.$t("appletdetail.navlist.basic"), value: "basic" },
			{ label: proxy?.$t("appletdetail.navlist.deploy"), value: "deploy" }
		]);
		const active = ref<string>("config");
		const changeView = (info: { label: string; value: string }) => {
			active.value = info.value;
		};
		const detailDialog = reactive<any>({
			title: proxy?.$t("appletdetail.dialog_title.mod"),
			visible: false
		});
		const submit = async () => {
			let res = await modUserApplet({ ...state.basicDetail });
			let ok = showTips(res.code, proxy?.$t("appletdetail.tips.mod"), res.message);
			if (ok) {
				detailDialog.visible = false;
				init();
			}
		};
		//网关scheme：设备参数配置模型
		return () => {
			return (
				<div>
					<BasicDialog
						width="800px"
						title={detailDialog.title}
						v-model:visible={detailDialog.visible}
						detail={state.basicDetail}
						onSubmit={submit}
					></BasicDialog>
					<PageHeader showBackText={false}>
						<span>{state.basicDetail.name}</span>
						<el-link
							class="iconfont iconbx-sync ml-4"
							type="primary"
							onClick={() => {
								init();
							}}
						>
							{proxy?.$t("common.btn.refresh")}
						</el-link>
					</PageHeader>
					<Navigation navList={navList} onChange={changeView} active={active.value} showToggle={false} />
					<el-scrollbar class="bg-white" style="height:calc(100vh - 221px)">
						{active.value == "basic" && <BasicDetail detail={state.basicDetail} onChange={submit} />}
						{active.value == "deploy" && <DeployDetail detail={state.basicDetail} />}
					</el-scrollbar>
				</div>
			);
		};
	}
});
